<template>
  <PageWrapper contentBackground>
    <template #title>
      <span>我的日志</span>
    </template>
    <Card class="card_All">
      <template #title>
        {{ user.nickname }}
        {{ moment().format('YYYY-MM-DD') }}
        {{ getDayString(moment().day()) }}
      </template>
      <div>
        <Tinymce
          v-model="content"
          @change="handleChange"
          width="100%"
          height="200"
          :toolbar="toolbar"
          :showImageUpload="showImageUpload"
          :menubar="menubar"
        />
      </div>
      <div
        ><Button
          type="primary"
          style="margin-top: 16px"
          @click="handleClickAdd"
          v-if="hasPermission(['system:work-log:create'])"
          >保存</Button
        >
      </div>
    </Card>
    <List item-layout="vertical" :data-source="listData">
      <template #loadMore>
        <div
          :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
        >
          <Button v-if="loadingMore" @click="getWorkLogMore">加载更多</Button>
        </div>
      </template>
      <template #renderItem="{ item, index }">
        <ListItem key="item.title"  v-if="(index) || (!index&&item.logContent)">
          <ListItemMeta> </ListItemMeta>
          <Card class="card_All">
            <template #title>
              {{ item.userName }}
              {{ item.logDate ? moment(item.logDate).format('YYYY-MM-DD') : '-' }}
              {{ item.logDate ? getDayString(moment(item.logDate).day()) : '-' }}
            </template>
            <div>
              <Tinymce
                v-if="item.state"
                v-model="item.logContent"
                @change="handleChange"
                width="100%"
                height="200"
                :toolbar="toolbar"
                :showImageUpload="showImageUpload"
                :menubar="menubar"
              />
              <div v-html="item.logContent" v-else class="content"></div>
            </div>
            <div>
              <a-button
                type="primary"
                style="margin-top: 16px; margin-right: 10px"
                @click="handleClickEdit(item, index)"
                v-if="hasPermission(['system:work-log:update']) && item.logContent"
                >{{ item.state ? '保存' : '编辑' }}</a-button
              >
              <a-button
                type="primary"
                style="margin-top: 16px; margin-right: 10px"
                @click="handleClickEdit(item, index)"
                v-if="!item.logContent"
                >{{ item.state ? '保存' : '补交' }}</a-button
              >
              <!-- <a-button type="primary" danger>
                <Popconfirm
                  title="是否删除日志？"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="handleClickDelete(item, index)"
                >
                  <a href="#">删除</a>
                </Popconfirm></a-button
              > -->
            </div>
          </Card>
        </ListItem>
      </template>
      <template #footer></template>
    </List>
  </PageWrapper>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue';
import { PageWrapper } from '/@/components/Page';
import { Tinymce } from '/@/components/Tinymce/index';
import { workLogList, workLogAdd, workLogEdit, workLogDelete } from '/@/api/backs/workLog/diary';
import { Card, List, Spin, ListItem, ListItemMeta, Button, Popconfirm } from 'ant-design-vue';
import { useUserStore } from '/@/store/modules/user';
import { message } from 'ant-design-vue';
import { usePermission } from '/@/hooks/web/usePermission';
import moment from 'moment';
export default defineComponent({
  components: {
    PageWrapper,
    Card,
    Tinymce,
    List,
    Spin,
    ListItem,
    ListItemMeta,
    Button,
    Popconfirm,
  },
  setup() {
    const { hasPermission } = usePermission();
    const userStore = useUserStore();
    const data: any = reactive({
      options: {},
      toolbar: true,
      showImageUpload: false,
      content: '',
      menubar: false,
      title: 's',
      pageNo: 1,
      pageSize: 10,
      listData: [],
      loadingMore: false,
      total: 0,
      user: userStore.getUserInfo.user,
      logDate: moment().format('x'),
    });
    console.log('获取人民', userStore.getUserInfo.user);

    function handleChange(value: string) {}
    //
    const getDayString = (day) => {
      switch (day) {
        case 0:
          return '星期天';
        case 1:
          return '星期一';
        case 2:
          return '星期二';
        case 3:
          return '星期三';
        case 4:
          return '星期四';
        case 5:
          return '星期五';
        case 6:
          return '星期六';
      }
    };
    //加载更多
    function getWorkLogMore() {
      if (data.loadingMore) {
        data.pageNo += 1;
        getWorkLogList();
      }
    }
    //保存
    const handleClickAdd = async () => {
      let add = {
        userId: data.user.id,
        logContent: data.content,
        logDate: data.logDate,
        id: data.workId,
      };
      try {
        await workLogEdit(add);
        data.pageNo = 1;
        data.content = '';
        getWorkLogList();
      } catch (error) {}
    };
    //编辑
    const handleClickEdit = async (item, index) => {
      data.listData[index].state = !data.listData[index].state;
      if (!data.listData[index].state) {
        try {
          let edit = {
            id: item.id,
            userId: data.user.id,
            logContent: item.logContent,
            logDate: item.logDate,
          };
          await workLogEdit(edit);
          data.pageNo = 1;
          data.content = '';
          getWorkLogList();
        } catch (error) {}
      }
    };
    //获取列表
    const getWorkLogList = async () => {
      let paramas = {
        pageNo: data.pageNo,
        pageSize: data.pageSize,
        userId: data.user.id,
      };
      try {
        let res = await workLogList(paramas);
        data.total = res.total;

        if (data.loadingMore && data.pageNo != 1) {
          data.listData = data.listData.concat(res.list);
        } else {
          data.listData = res.list;
        }
        data.loadingMore = data.total > data.listData.length;
        if (data.listData && data.listData.length) {
          data.listData.forEach((i, index) => {
            i.state = false;
          });
        }
        data.logDate = moment().format('x');
        data.workId = data.listData[0].id
      } catch (error) {}
    };

    //删除日志
    const handleClickDelete = async (record: Recordable) => {
      console.log('我是删除', record);

      workLogDelete({ id: record.id }).then((res) => {
        if (res) {
          message.success('删除成功！');
          getWorkLogList();
        }
      });
    };

    getWorkLogList();
    return {
      ...toRefs(data),
      handleChange,
      handleClickAdd,
      handleClickEdit,
      getWorkLogList,
      moment,
      getDayString,
      getWorkLogMore,
      handleClickDelete,
      hasPermission,
      // actions,
    };
  },
});
</script>
<style lang="less" scoped>
::v-deep(.vben-page-wrapper-content-bg) {
  background: transparent;
}
</style>
